<template>
  <view class="container">
    <view class="header">
      <text class="title">任务详情</text>
    </view>
    <view class="task-info">
		<view class="info-item">
		  <text class="label">导师：</text>
		  <text class="value">{{getTchLabel(form.gxrwDs)}}</text>
		</view>
      <view class="info-item">
        <text class="label">任务名称：</text>
        <text class="value">{{form.gxrwRwmc}}</text>
      </view>
      <view class="info-item">
        <text class="label">开始时间：</text>
        <text class="value">{{form.gxrwKssj}}</text>
      </view>
      <view class="info-item">
        <text class="label">结束时间：</text>
        <text class="value">{{form.gxrwJssj}}</text>
      </view>
	  <view class="info-item">
	    <text class="label">任务数量：</text>
	    <text class="value">{{form.gxrwRwsl}}</text>
	  </view>
	  <view class="info-item">
	    <text class="label">数量单位：</text>
	    <text class="value">{{form.gxrwSldw}}</text>
	  </view>
	  <view class="info-item">
	    <text class="label">任务完成质量：</text>
	    <text class="value">{{form.gxrwWczl}}</text>
	  </view>
      <view class="info-item">
        <text class="label">验收标准：</text>
        <text class="value">{{form.gxrwRsbz}}</text>
      </view>
      <view class="info-item">
        <text class="label">地点：</text>
        <text class="value">{{form.gxrwDd}}</text>
      </view>
      <view class="info-item">
        <text class="label">任务附件</text>
        <text class="value">{{form.gxrwRwfj}}</text>
      </view>
    </view>
	<view class="header" v-if="hbxqshow">
	  <text class="title">汇报详情</text>
	</view>
	<view class="task-info" v-if="hbxqshow">
	  <view class="info-item">
	    <text class="label">学生：</text>
	    <text class="value">{{form.gxrwXs}}</text>
	  </view>
	  <view class="info-item">
	    <text class="label">任务应完成数量：</text>
	    <text class="value">{{form.gxrwRwsl}}</text>
	  </view>
	  <view class="info-item">
	    <text class="label">任务实际完成数量：</text>
	    <text class="value">{{form.gxrwSjsl}}</text>
	  </view>
	  <view class="info-item">
	    <text class="label">学生自评得分：</text>
	    <text class="value">{{form.gxrwXspf}}</text>
	  </view>
	  <view class="info-item">
	    <text class="label">任务完成情况：</text>
	    <text class="value">{{form.gxrwWcqk}}</text>
	  </view>
	  <view class="info-item">
	    <text class="label">岗训创新思考：</text>
	    <text class="value">{{form.gxrwSk}}</text>
	  </view>
	  <view class="info-item">
	    <text class="label">复盘总结：</text>
	    <text class="value">{{form.gxrwZj}}</text>
	  </view>
	</view>
	<view class="header" v-if="zjxqshow">
	  <text class="title">质检详情</text>
	</view>
	<view class="task-info" v-if="zjxqshow">
	  <view class="info-item">
	    <text class="label">企业导师：</text>
	    <text class="value">{{getTchLabel(form.gxrwQyds)}}</text>
	  </view>
	  <view class="info-item">
	    <text class="label">实际完成数量：</text>
	    <text class="value">{{form.gxrwSjwcsl}}</text>
	  </view>
	  <view class="info-item">
	    <text class="label">导师验收得分：</text>
	    <text class="value">{{form.gxrwDsdf}}</text>
	  </view>
	</view>
	<view class="task-info" v-if="inputshow">
		<view class="info-item">
			<view class="label">任务实际完成数量</view>
			<input class="value" type="number" v-model="form.gxrwSjsl" placeholder="请输入任务完成数量"/>
		</view>
		<view class="info-item">
			<view class="label">任务完成情况</view>
				<radio-group @change="radioChange">
				<radio value="未完成" />
				未完成
				<radio value="部分完成" />
				部分完成
				<radio value="已完成" />
				已完成
				</radio-group>		</view>
		<view class="info-item">
			<view class="label">学生自评得分</view>
			<input class="value" type="number" v-model="form.gxrwXspf" placeholder="请输入自评得分"/>
		</view>
		<view class="info-item">
			<view class="label">复盘总结</view>
			<textarea class="value"  v-model="form.gxrwZj" placeholder="请输入复盘总结"/>
		</view>
		<view class="info-item">
			<view class="label">岗训创新思考</view>
			<textarea class="value" v-model="form.gxrwSk" placeholder="请输入岗训创新思考"/>
		</view>
    <view class="footer" >
      <!-- 这里可以添加按钮或其他交互元素 -->
      <button type="primary" @click="handleButtonClick">提交</button>
    </view>
	</view>
  </view>
</template>

<script>
	import {getGxrw,updateGxrw} from  "@/api/admin/gxrw";
	import { allocatedUserList } from "@/api/system/role";
export default {
  data() {
    return {
		zjxqshow:false,
		hbxqshow:false,
		inputshow:true,
		form:[],tchList:[]
	};
  },
  onLoad(options) {
  	this.getGx(options.id)
	this.getTch()
  },
  methods: {
	  getGx(id){
		  getGxrw(id).then(response => {
        this.form = response.data;
		if(!(this.form.gxrwLcjd==='0')){
			this.hbxqshow=true;
			this.zjxqshow=true;
			this.inputshow=false;
		}
      });
	  },
	  radioChange(event) {
	        this.form.gxrwWcqk = event.detail.value;
	      },
		handleButtonClick() {
				if (this.form.id != null){
					this.form.gxrwLcjd='3'
				updateGxrw(this.form).then(response => {
							this.inputshow = false;
							});
				}
			// 处理按钮点击事件
			uni.showToast({
			title: '提交成功',
			icon: 'success',
			});
		},
		//获取教师列表
		getTch(){
			const queryParams= {
				roleId: 101
			}
			allocatedUserList(queryParams).then(res => {
				this.tchList = res.rows;
			});
		},
		getTchLabel(userName) {
			// 创建一个映射函数，该函数将ID映射到标签  
			const map = this.tchList.reduce((acc, item) => {  
			acc[item.userName] = item.nickName;
			return acc;  
			}, {});  
			// 返回一个函数，该函数接受一个ID并返回相应的标签  
			return map[userName] || 'Unknown Label';  
		}  
  },
};
</script>

<style scoped>
.container {
  padding: 30rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  margin: 30rpx 0;
  padding: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #303133;
  position: relative;
  padding-left: 24rpx;
}

.title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 32rpx;
  background-color: #409eff;
  border-radius: 3rpx;
}

.task-info {
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  margin-bottom: 30rpx;
  animation: slideIn 0.3s ease-out;
}

.info-item {
  margin-bottom: 24rpx;
  display: flex;
  align-items: flex-start;
  line-height: 1.6;
}

.label {
  font-size: 28rpx;
  color: #606266;
  width: 200rpx;
  flex-shrink: 0;
}

.value {
  flex: 1;
  font-size: 28rpx;
  color: #303133;
  word-break: break-all;
}

.info-item:last-child {
  margin-bottom: 0;
}

/* 状态标签样式 */
.status-tag {
  display: inline-block;
  padding: 6rpx 20rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.status-pending {
  background-color: #fdf6ec;
  color: #e6a23c;
}

.status-approved {
  background-color: #f0f9eb;
  color: #67c23a;
}

.status-rejected {
  background-color: #fef0f0;
  color: #f56c6c;
}

/* 按钮样式 */
.footer {
  margin-top: 40rpx;
  padding: 0 30rpx;
}

button {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #409eff;
  color: #ffffff;
  font-size: 32rpx;
  border-radius: 44rpx;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(64, 158, 255, 0.2);
}

button:active {
  transform: scale(0.96);
  background-color: #3a8ee6;
}

/* 分割线样式 */
.divider {
  height: 1rpx;
  background-color: #ebeef5;
  margin: 24rpx 0;
}

/* 文件上传区域样式 */
.upload-area {
  background-color: #fafafa;
  border: 2rpx dashed #dcdfe6;
  border-radius: 8rpx;
  padding: 30rpx;
  text-align: center;
  margin-top: 24rpx;
}

.upload-icon {
  font-size: 48rpx;
  color: #909399;
  margin-bottom: 16rpx;
}

.upload-text {
  font-size: 28rpx;
  color: #606266;
}

/* 文件列表样式 */
.file-list {
  margin-top: 24rpx;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 16rpx;
  background-color: #f5f7fa;
  border-radius: 8rpx;
  margin-bottom: 16rpx;
}

.file-icon {
  font-size: 32rpx;
  color: #409eff;
  margin-right: 16rpx;
}

.file-name {
  flex: 1;
  font-size: 28rpx;
  color: #303133;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>